<script>
import Tooltip from 'ant-design-vue/es/tooltip'
import { cutStrByFullLength, getStrFullLength } from '@/components/_util/util'
/*
    const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;

    const TooltipOverlayStyle = {
      overflowWrap: 'break-word',
      wordWrap: 'break-word',
    };
  */

export default {
    name: 'Ellipsis',
    components: {
        Tooltip
    },
    props: {
        prefixCls: {
            type: String,
            default: 'ant-pro-ellipsis'
        },
        tooltip: {
            type: Boolean
        },
        length: {
            type: Number,
            required: true
        },
        lines: {
            type: Number,
            default: 1
        },
        fullWidthRecognition: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        getStrDom(str, fullLength) {
            return <span>{cutStrByFullLength(str, this.length) + (fullLength > this.length ? '...' : '')}</span>
        },
        getTooltip(fullStr, fullLength) {
            return (
                <Tooltip>
                    <template slot="title">{fullStr}</template>
                    {this.getStrDom(fullStr, fullLength)}
                </Tooltip>
            )
        }
    },
    render() {
        const { tooltip, length } = this.$props
        const str = this.$slots.default.map(vNode => vNode.text).join('')
        const fullLength = getStrFullLength(str)
        const strDom =
            tooltip && fullLength > length ? this.getTooltip(str, fullLength) : this.getStrDom(str, fullLength)
        return strDom
    }
}
</script>
